import React, { memo } from 'react';
import { Card, Statistic } from 'antd';
import type { StatisticProps } from 'antd/es/statistic';

/**
 * 性能优化的统计卡片组件
 * 使用memo避免不必要的重渲染
 */
interface StatCardProps extends Omit<StatisticProps, 'prefix'> {
  title: string;
  value: number;
  prefix?: React.ReactNode;
  loading?: boolean;
  color?: string;
  trend?: 'up' | 'down' | 'stable';
  trendValue?: number;
  onClick?: () => void;
}

const StatCard: React.FC<StatCardProps> = memo(({
  title,
  value,
  prefix,
  loading = false,
  color,
  trend,
  trendValue,
  onClick,
  ...statisticProps
}) => {
  // 计算数值样式
  const getValueStyle = () => {
    if (color) {
      return { color };
    }
    return {};
  };

  // 渲染趋势指示器
  const renderTrend = () => {
    if (!trend || !trendValue) return null;

    const trendIcon = trend === 'up' ? '↗' : trend === 'down' ? '↘' : '→';
    const trendColor = trend === 'up' ? '#52c41a' : trend === 'down' ? '#ff4d4f' : '#d9d9d9';

    return (
      <span style={{
        marginLeft: 8,
        color: trendColor,
        fontSize: '12px'
      }}>
        {trendIcon} {Math.abs(trendValue)}%
      </span>
    );
  };

  return (
    <Card
      hoverable={!!onClick}
      onClick={onClick}
      loading={loading}
      bodyStyle={{ padding: '24px' }}
    >
      <Statistic
        title={title}
        value={value}
        prefix={prefix}
        valueStyle={getValueStyle()}
        suffix={renderTrend()}
        {...statisticProps}
      />
    </Card>
  );
});

StatCard.displayName = 'StatCard';

export default StatCard;